/* {[The file is published on the basis of YetiForce Public License 3.0 that can be found in the following directory: licenses/LicenseEN.txt or yetiforce.com]} */

//--- MIXINS ---//
@mixin u-transition($settings) {
	-webkit-transition: $settings;
	-moz-transition: $settings;
	-ms-transition: $settings;
	-o-transition: $settings;
	transition: $settings;
}

@mixin u-box-shadow($settings) {
	-moz-box-shadow: $settings;
	-webkit-box-shadow: $settings;
	box-shadow: $settings;
}

@mixin u-column-count($number) {
	-webkit-column-count: $number;
	-moz-column-count: $number;
	column-count: $number;
}

@mixin u-column-gap($number) {
	-webkit-column-gap: $number;
	-moz-column-gap: $number;
	column-gap: $number;
}

@mixin u-column-width($number) {
	-webkit-column-width: $number;
	-moz-column-width: $number;
	column-width: $number;
}

//--- TEXT ---//
.u-text-small-bold {
	@extend .small;
	@extend .font-weight-bold;
}

.u-font-size-10px {
	font-size: calculate-rem(10px);
}

.u-font-size-13px {
	font-size: calculate-rem(13px);
}

.u-font-size-14px {
	font-size: calculate-rem(15px);
}

.u-font-size-38px {
	font-size: calculate-rem(38px);
}

.u-font-size-19px {
	font-size: calculate-rem(19px);
}

@for $i from 1 through 9 {
	.u-font-weight-#{$i*100} {
		font-weight: #{$i*100} !important;
	}
}

.u-text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	&:hover {
		overflow: initial;
	}

	&.u-text-ellipsis--bg-white {
		&:hover {
			background: $white;
			z-index: 1000000;
			position: absolute;

			@include u-box-shadow(2px 2px 10px $gray-400);
		}
	}
}

.u-text-ellipsis--no-hover,
.js-popover-tooltip--ellipsis,
.js-popover-tooltip--ellipsis-icon .js-popover-text,
.js-popover-tooltip--ellipsis-icon .c-popover-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.js-popover--before-positioned {
	opacity: 0;
	height: 0;
	overflow: hidden;
}

.u-text-ellipsis--not-active {
	width: auto !important;
	text-overflow: unset !important;
	visibility: hidden !important;
	overflow: visible !important;
	display: inline-block !important
}

.u-text-underline {
	text-decoration: underline;
}

.u-hover-bold:hover {
	@extend .font-weight-bold;
}

.u-hover-opacity:hover {
	opacity: 0.5;
	@include u-transition(opacity 275ms ease);
}

.u-word-break-all {
	word-break: break-all !important;
}

.u-word-break {
	word-break: break-word !important;
}

.u-word-break-keep-all {
	word-break: keep-all !important;
}

.u-font-size-95per {
	font-size: 95% !important;
}

.u-font-size-100per {
	font-size: 100% !important;
}

.u-font-size-44px {
	font-size: calculate-rem(44px);
}

//--- MARGIN ---//
.u-m-5px {
	margin: 5px;
}

.u-ml-0 {
	margin-left: 0 !important;
}

.u-ml-10px {
	margin-left: calculate-rem(10px);
}

.u-mr-0px {
	margin-right: 0 !important;
}

.u-ml-0px {
	margin-left: 0 !important;
}

.u-mr-5px {
	margin-right: calculate-rem(5px);
}

.u-mt-2px {
	margin-top: calculate-rem(2px);
}

.u-paragraph-m-0 {
	p {
		margin: 0;
	}
}

.u-mb-13px {
	margin-bottom: 0.8rem !important;
}

.u-ml-minus-5px {
	margin-left: calculate-rem(-5px);
}

.u-mr-minus-8px {
	margin-right: calculate-rem(-8px);
}

//--- PADDING ---//
.u-p-1per {
	padding: 1%;
}

@include media-breakpoint-down(sm) {
	.u-p-05per {
		padding: 0.5%;
	}
}

.u-p-x-0px {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

//--- WIDTH ---//
// width % breakpoint classes for 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
@for $i from 1 through 10 {
	@each $breakpoint, $min in $grid-breakpoints {
		@if $min > 0 {
			@media (min-width: $min) {
				.u-min-w-#{$breakpoint}-#{$i*10} {
					min-width: $i*10% !important;
				}

				.u-max-w-#{$breakpoint}-#{$i*10} {
					max-width: $i*10% !important;
				}

				.u-w-#{$breakpoint}-#{$i*10} {
					min-width: $i*10% !important;
				}
			}
		}
	}
}

.u-w-10per {
	width: 10%;
}

.u-w-30per {
	width: 30%;
}

.u-w-37per {
	width: 37% !important;
}

.u-w-fit {
	width: fit-content !important;
}

.u-w-max {
	width: max-content !important;
	width: -moz-max-content !important;
}

.u-w-max-320px {
	max-width: 320px !important;
}

.u-w-1per-45px {
	width: 1%;
	min-width: 45px !important;
}

.u-w-3per-150px {
	width: 3%;
	min-width: 150px !important;
}

.u-w-3per-250px {
	width: 3%;
	min-width: 250px !important;
}

.u-w-30per-18rem {
	width: 30% !important;
	min-width: 18rem;
}

.u-w-50px {
	width: 50px;
}

.u-w-85px {
	width: 85px;
}

.u-w-79px {
	width: 79px;
}

.u-w-125px {
	width: 125px;
}

.u-w-90per {
	width: 90%;
}

.u-min-w-650px {
	min-width: calculate-rem(650px) !important;
}

.u-min-w-300px {
	min-width: calculate-rem(300px) !important;
}

.u-w-1em {
	width: 1em;
}

@include media-breakpoint-down(sm) {
	.u-w-sm-down-100 {
		width: 100%;
	}
}

@include media-breakpoint-down(xs) {
	.u-w-xs-down-100 {
		width: 100%;
	}
}

.u-max-w-150px {
	max-width: 150px;
}

//--- HEIGHT ---//
.u-h-50px {
	height: 50px;
}

.u-h-600px {
	height: 600px !important;
}

.u-h-input-text {
	height: $h-input-text;
}

.u-h-120px {
	height: $h-modal-logo;
}

.u-h-fit {
	height: fit-content !important;
}

.u-h-70vh {
	height: 70vh !important;
}

.u-h-1em {
	height: 1em;
}

.u-min-h-30per {
	min-height: 30%;
}

.u-min-h-85vh {
	min-height: 85vh;
}

//--- BORDER ---//
.u-border-right-10px {
	border-right: 10px solid
}

.u-border-left-10px {
	border-left: 10px solid
}

@media only screen and (max-width: 990px) {
	.u-border-bottom-label-md {
		border-bottom: 1px solid #dee2e6;
	}
}

@media only screen and (max-width: 575px) {
	.u-border-bottom-value-sm {
		border-bottom: 1px solid #dee2e6;
	}
}

@media only screen and (max-width: 991px) {
	.u-border-right-0-md {
		border-right: none !important;
	}
}

@media only screen and (max-width: 575px) {
	.u-border-bottom-0-sm {
		border-bottom: none !important;
	}
}

//--- BACKGROUND ---//
.u-bg-twilight {
	background-color: #404952 !important;
	color: #fff;
}

.u-bg-modern {
	background-color: #0d9605 !important;
}

.u-rotate-90 {
	transform: rotate(0.75turn);
	position: absolute;
}

.u-hide-underneath {
	z-index: -1;
}

.u-z-index-100 {
	z-index: 100;
}

.u-cursor-pointer {
	cursor: pointer;
	text-decoration: none !important;
}

.u-cursor-auto {
	cursor: auto;
}

.u-cursor-grab {
	cursor: -webkit-grab;
}

.u-cursor-scroll-all {
	* {
		cursor: all-scroll !important;
	}
}

.u-overflow-auto {
	overflow: auto !important;
}

.u-overflow-y-auto {
	overflow-y: auto !important;
}

.u-overflow-x-hidden {
	overflow-x: hidden !important;
}

@include media-breakpoint-down(xsm) {
	.u-overflow-scroll-xsm-down {
		overflow: scroll !important;
	}
}

.u-remove-dropdown-icon {
	.dropdown-toggle::after {
		display: none;
	}
}

@include media-breakpoint-down(lg) {
	.u-overflow-auto-lg-down {
		overflow: auto !important;
	}
	.u-remove-dropdown-icon-down-lg {
		.dropdown-toggle::after {
			display: none;
		}
	}
}

//--- TABLE ---//
.u-w-30per {
	width: 30%;
}

.u-w-8per {
	width: 8%;
}

.u-w-5per {
	min-width: 5%;
	max-width: 25%;
}

.u-disabled {
	pointer-events: none;
	opacity: 0.65;
}

.u-box-shadow {
	@include u-box-shadow(3px 3px 14px 0 rgba(50, 50, 50, 0.75));
}

@each $breakpoint, $max in $grid-breakpoints {
	@if $max > 0 {
		@media (max-width: $max) {
			.display-block-#{$breakpoint} {
				display: block !important;
			}
		}
	}

}

.u-opacity-muted {
	opacity: 0.2;
}

//--- COLUMNS ---///
.u-columns {
	&__item {
		display: inline-block;
		width: 100%;
	}

	&-gap-1rem {
		@include u-column-gap(1rem);
	}

	&-count-3 {
		@include u-column-count(3);
	}

	&-width-36rem {
		@include u-column-width(36rem);
	}

	&-width-300px-rem {
		@include u-column-width(#{calculate-rem(300px)});
	}
}

//--- POSITIONS ---//
.u-position-r-0 {
	right: 0;
}

.u-position-r-5px {
	right: calculate-rem(5px);
}

.u-position-r-10px {
	right: calculate-rem(10px);
}

.u-position-t-10px {
	top: calculate-rem(10px);
}

.u-position-t-5px {
	top: calculate-rem(5px);
}

.u-position-t-2px {
	top: calculate-rem(2px);
}

//--- ALIGN ---//

.u-align-middle-children {
	* {
		vertical-align: middle !important;
	}
}

.u-table-column__before-block {
	&--inventory {
		width: 1%;
	}

	&:before {
		content: '';
		display: block;
	}
}

@for $i from 1 through 100 {
	.u-table-column__vw-#{$i} {
		&:before {
			width: #{$i}vw;
		}
	}
}

//--- WHITE SPACE ---//

@each $breakpoint in map-keys($grid-breakpoints) {
	@include media-breakpoint-up($breakpoint) {
		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

		.u-white-space#{$infix}-nowrap {
			white-space: nowrap !important;
		}
		.u-white-space#{$infix}-normal {
			white-space: normal !important;
		}
	}
}

// --- MIN HEIGHT --- //

@for $i from 1 through 10 {
	.u-min-height-#{$i}0 {
		min-height: #{$i}0px;
	}
}
